<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/icons-extra.css" rel="stylesheet" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			html {
				height: 100%;
			}
			
			body {
				height: 100%;
				background-color: white;
			}
			
			.head {
				height: 40px;
			}
			
			#head {
				line-height: 40px;
			}
			
			.head-img {
				width: 40px;
				height: 40px;
			}
			
			#head-img1 {
				position: absolute;
				bottom: 10px;
				right: 40px;
				width: 40px;
				height: 40px;
			}
			
			.mui-table-view-cell {
				margin: 0 auto;
				font-size: 14px;
				color: #666;
			}
			
			.mui-icon {
				font-size: 20px;
				color: #27CDDB;
			}
			
			.mui-bar-nav {
				background: #27CDDB;
			}
			
			.mui-action-back,
			.mui-title,
			.mui-action-back:active {
				color: #FFFFFF;
			}
			/*点击变蓝色高亮*/
			
			.mui-table-view-cell.mui-active {
				background-color: white;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="title">系统公告</h1>
		</header>
		<div class="mui-content" id="aicVue">
			<div id="pullrefresh">
				<div class="mui-scroll">
					<ul id="notices" class="mui-table-view">
						<li class="mui-table-view-cell" v-for="item in notices" @click="open(item)">
							<div class="mui-card" style="margin: 0px;height: 100px;">
								<div class="mui-card-header">{{item.title}}
									<p>{{item.createTime}}</p>
								</div>
								<div class="mui-card-content">
									<div class="mui-card-content-inner">
										<p>{{item.content}}</p>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="../js/jquery-1.8.3.min.js "></script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/public.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: "#pullrefresh", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: {
						auto: false,
						style: 'circle',
						callback: refreshNotices //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					},
					up: {
						height: 50, //可选.默认50.触发上拉加载拖动距离
						auto: false, //可选,默认false.自动上拉加载一次
						contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
						contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: loadMoreNotices //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
				}
			});

			var vm = new Vue({
				el: '#aicVue',
				data: {
					notices: []
				},
				mounted: function() {
					mui.plusReady(function() {
						swipeBack();
						refreshNotices();
					});
				},
				methods: {
					open: function(item) {
						mui.openWindow({
							id: 'notice-detail',
							url: '../main/notice-detail.html',
							extras: {
								noticeId: item.id
							}
						});
					}
				}
			});

			var page = 1;
			var totalPage = 1; //总页码
			var cuPage = 1; //当前页码
			//刷新公告
			function refreshNotices() {
				page = 1;
				var data = {
					"page": page
				}
				mui.postParam(GetNotices, data, function(result) {
					mConsole.log("获取公告列表：" + JSON.stringify(result));
					if(result.code == 0) {
						totalPage = result.page.totalPage;
						cuPage = result.page.currPage;

						vm.notices.splice(0, vm.notices.length);
						vm.notices = vm.notices.concat(result.page.list);
					} else {
						mymui(result.msg);
					}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //参数为true代表没有更多数据了。
					if(cuPage >= totalPage) {
						mui('#pullrefresh').pullRefresh().disablePullupToRefresh();
					} else {
						mui('#pullrefresh').pullRefresh().enablePullupToRefresh();
					}
				});
			}

			function loadMoreNotices() {
				page += 1;
				var data = {
					"page": page
				};
				mui.postParam(GetNotices, data, function(result) {
					mConsole.log("加载更多列表：" + JSON.stringify(result));
					if(result.code == 0) {
						totalPage = result.page.totalPage;
						cuPage = result.page.currPage;
						if(page == 1) {
							vm.notices.splice(0, vm.notices.length);
						}
						vm.notices = vm.notices.concat(result.page.list);
						page += 1;
					} else {
						mymui(result.msg);
					}
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(cuPage >= totalPage);
				});
			}
		</script>
	</body>

</html>